<!--用户管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="font-size:20px;line-height: 60px;">用户管理</span>
    <el-button @click="dialogVisible=true" type="primary"
               style="float: right;margin-top:10px;">新建用户
    </el-button>
  </div>
  <!-- 新建/编辑用户弹窗 -->
  <!-- :before-close="handleClose"
  在关闭之前调用handleClose方法,避免点击窗口外部也能关弹窗  -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             :before-close="handleClose"
             style="width: 1000px;padding:40px;">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"
                      :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio label="男" border value="男" style="margin: 0;"></el-radio>
              <el-radio label="女" border value="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="学校">
            <el-input placeholder="请输入学校" v-model="saveUserForm.schoolName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="头像">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="actionUrl"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="imgDialogVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="城市">
            <el-input placeholder="请输入学校城市" v-model="saveUserForm.city"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>

  <!-- 用户查询卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索">
        <el-input placeholder="输入用户名" style="width: 220px;"
                  v-model="searchUserForm.username" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="用户学校">
        <el-input placeholder="请输入用户学校" style="width: 290px;"
                  v-model="searchUserForm.schoolName" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户信息表格 -->
  <el-card style="margin: 20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="imgUrl" label="头像" width="80" align="center">
        <template #default="{ row }">
          <el-image
              :src="BASE_URL+row.imgUrl"
              fit="cover"
              style="width: 50px; height: 50px; border-radius: 50%;">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="schoolName" label="学校" align="center"></el-table-column>
      <el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link
                     :disabled="scope.row.level==40"
                     @click="resetPassword(scope.row.id)">密码重置</el-button>
          <el-button type="primary" size="small" link
                     :disabled="scope.row.level==40"
                     @click="editUser(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="small" link
                     :disabled="scope.row.level==40" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogVisible = ref(false);
const dialogTitle = ref('新建用户');

//定义数组用来保存用户列表数据
const userArr = ref([
  {
    imgUrl: '',
    username: '',
    phone: '',
    createTime: '',
    schoolName: ''
  }
]);

//定义对象收集新增/修改用户弹窗的表单信息
const saveUserForm = ref({
  username: '',
  age: '',
  gender: '',
  imgUrl: '',
  phone: '',
  email: '',
  schoolName: '',
  city:''
});

//定义对象用来保存查询条件
const searchUserForm = ref({username: '', schoolName: ''});

//处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('确定关闭本窗口吗?')) {
    //用户确认关闭后,关闭弹窗
    dialogVisible.value = false;
    //清空已输入的表单数据
    saveUserForm.value = {};
    fileList.value=[];
  }
}
//定义保存用户的方法
const saveUser = () => {
  //如果向后端发请求的参数是一个对象,前端可以使用qs将参数对象转为查询字符串的格式发送
  //格式:username=tom&phone=18811112222&email=tom@qq.com&age=12&level=20&parentId=1&gender=1&status=1
  //这样在前端直接处理好,后端不需要考虑前端传过来的是否为对象,也不用加@RequestBody注解了
  let data = qs.stringify(saveUserForm.value);
  console.log('新增用户数据' + data);
  axios.post(BASE_URL + '/v1/user/save', data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('保存成功!');
          dialogVisible.value = false;//关闭弹窗
          saveUserForm.value = {};//清空已入库的表单数据，否则再次打开弹窗还是之前的值
          //新增/更新用户后,都需要重新加载用户数据
          fileList.value=[];
          loadUser();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
//定义加载用户数据的方法
const loadUser = () => {
  let data = qs.stringify(searchUserForm.value);
  console.log('查询用户数据' + data);
  //如果有查询条件,就根据条件查,没有查询条件,默认查全部员工信息
  axios.get(BASE_URL + '/v1/user/select?' + data).then((response) => {
    //如果后端返回的状态码是2000,说明成功了
    if (response.data.code == 2000) {
      //把成功请求回来的数据装到与表格绑定的数组中
      userArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//重置密码 restful风格
const resetPassword = (userId)=>{
  axios.post(BASE_URL+'/v1/user/update/password/'+userId).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('密码重置成功!');
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//编辑用户
const editUser=(id)=>{
  //打开弹窗并修改标题
  dialogVisible.value = true;
  dialogTitle.value = '编辑用户';
  //给后端发请求:根据员工id查指定员工的信息
  axios.get(BASE_URL+'/v1/user/select?id='+id).then((response)=>{
    if(response.data.code == 2000) {
      //注意:后端返回的是List<UserVO> list! 所以这里是data[0]
      console.log(response.data.data[0]);
      saveUserForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//删除用户
const deleteUser = (userId)=>{
  if(confirm('您确认要删除该用户吗?')){
    axios.post(BASE_URL+'/v1/user/delete/'+userId).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success('删除成功!');
        //删除成功后,重新加载用户列表
        loadUser();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//重置搜索信息
const resetSearch = () => {
  //清空之前输入的搜索内容
  searchUserForm.value = {};
  //重新加载所有的用户数据
  loadUser();
}
//页面加载完毕立即调用的方法
onMounted(() => {
  //加载员工数据
  loadUser();
})

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const imgDialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/v1/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL + '/v1/file/remove?imgUrl=' + imgUrl)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);
  // console.log(fileList.value[0].response.data);
}

// 新增处理图片上传成功的函数
const handleUploadSuccess = (response) => {
  if (response.data) {
    // 假设前端可以通过特定基础路径访问图片
    const imageUrl = `${response.data}`;
    saveUserForm.value.imgUrl = imageUrl;
  } else {
    ElMessage.error('图片上传成功，但未获取到图片URL！');
    console.error('Invalid response structure for uploaded image.', response);
  }
};

</script>


<style scoped>

</style>